<template>
	<view>
		<!-- 搜索栏 -->
		<view class="search">
			<view class="search_city" @click="select_city">
				<image src="/static/icon/icon_dingwei.png" class="search_city_icon"></image>
				<view class="search_city_text">{{ map.city || '北京' }}</view>
			</view>
			<uni-search-bar class="search_input" @confirm="search" @input="inputSearch" :value="searchValue"
				@clear="clearSearch" radius="10" cancelButton="none" />
			<view class="search_btn" @click="searchBtn">搜索</view>
		</view>
		<!-- 滚动 -->
		<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrolltolower">
			<!-- 轮播 -->
			<uni-swiper-dot :info="banner_list" :current="current" field="content" mode="round"
				:dotsStyles="dotsStyles">
				<swiper class="banner" @change="change">
					<swiper-item v-for="(item, index) in banner_list" :key="index" @click="buyBtn(item)"
						class="banner_item">
						<image class="banner_item_img" :src="item.cover"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- 选项卡 -->
			<view class="tab">
				<view class="tab_item" :class="tab_index == 1 ? 'tab_active' : ''" @click="tab_change_index"
					data-index="1">正在热映</view>
				<view class="tab_item" :class="tab_index == 0 ? 'tab_active' : ''" @click="tab_change_index"
					data-index="0">即将上映</view>
			</view>
			<!-- 热映电影 -->
			<view class="list" v-show="tab_index == 1">
				<view class="list_item" v-for="(item, index) in move_list_hot" :key="index">
					<image class="list_item_img" :src="item.pic" @click="movieInfoBtn(item)"></image>
					<view class="list_item_info" @click="movieInfoBtn(item)">
						<view class="list_item_info_name">{{ item.name }}</view>
						<view class="list_item_info_filmTypes">{{ item.movieType }}</view>
						<view class="list_item_info_money">
							<text class="list_item_info_money_text">市场价￥39.9</text>
							特惠:￥29.9
						</view>
						<view class="list_item_info_score">
							评分:
							<text style="color: #f9ba37;">{{ item.grade == 0 ? '暂无' : item.grade }}</text>
						</view>
						<view class="list_item_info_type">{{ item.versionTypes }}</view>
						<view class="list_item_info_actor">{{ item.cast }}</view>
						<view class="list_item_info_date">上映日期:{{ (item.publishDate).substring(0,10) }}</view>
					</view>
					<view class="list_item_btn" @click="buyBtn(item)">购票</view>
				</view>
			</view>
			<!-- 预售电影 -->
			<view class="list" v-show="tab_index == 0">
				<view class="list_item" v-for="(item, index) in move_list_soon" :key="index">
					<image class="list_item_img" :src="item.pic" @click="movieInfoBtn(item)"></image>
					<view class="list_item_info" @click="movieInfoBtn(item)">
						<view class="list_item_info_name">{{ item.name }}</view>
						<view class="list_item_info_filmTypes">{{ item.movieType }}</view>
						<view class="list_item_info_money">
							<text class="list_item_info_money_text">市场价￥39.9</text>
							特惠:￥29.9
						</view>
						<view class="list_item_info_score">
							评分:
							<text style="color: #f9ba37;">{{ item.grade == 0 ? '暂无' : item.grade }}</text>
						</view>
						<view class="list_item_info_type">{{ item.versionTypes }}</view>
						<view class="list_item_info_actor">{{ item.cast }}</view>
						<view class="list_item_info_date">上映日期:{{ (item.publishDate).substring(0,10) }}</view>
					</view>
					<view class="list_item_btn" @click="buyBtn(item)">预售</view>
				</view>
			</view>
		</scroll-view>
		<!-- 自定义加载 -->
		<MyLoading :loading="loading" :type="3" :animation_updown="true"></MyLoading>
		<!-- 抽奖弹窗 -->
		<AlertLottery :alertLottery="alertLottery"></AlertLottery>
	</view>
</template>

<script>
	import AlertLottery from '@/components/alertLotteryWheel/alertLotteryWheel.vue';
	import MyLoading from '@/components/my-loading/my-loading.vue';
	import Map from '../../utils/map.js';
	import Route from '../../utils/route.js';
	export default {
		components: {
			MyLoading,
			AlertLottery
		},
		data() {
			return {
				// 自定义抽奖弹窗
				alertLottery: false,
				// 自定义加载动画
				loading: true,
				// 搜索框
				searchValue: '',
				map: {},
				// 轮播
				banner_list: [],
				current: 0,
				dotsStyles: {
					selectedBackgroundColor: '#f9ba37',
					selectedBorder: 0,
					backgroundColor: 'rgba(249, 186, 55,0.5)',
					border: 0
				},
				// 选项卡
				tab_index: 1,
				// 电影列表热映
				move_list_hot: {},
				// 电影列表预售
				move_list_soon: {},
				// 电影列表热映页
				move_list_hot_page: 1,
				// 电影列表热映页
				move_list_soon_page: 1
			};
		},
		async onLoad(e) {
			// 获取邀请人UID
			if (e.scene) {
				let uid = decodeURIComponent(e.scene).split("=")[1];
				e.uid = uid;
			}
			uni.setStorageSync('parent_id', e.uid);
			// 获取轮播数据
			this.bannerList();
			// 获取位置信息
			this.mapInfo();
			// 获取电影列表
			await this.movieHotList();
			await this.movieSoonList();
			// 获取抽奖信息
			await this.prize();
			this.loading = false;
		},
		async onShow() {
			if (uni.getStorageSync('map').city_code != this.map.city_code) {
				this.map = uni.getStorageSync('map');
				this.loading = true;
				await this.movieHotList();
				await this.movieSoonList();
				this.loading = false;
			}
		},
		methods: {
			// 获取地图信息
			async mapInfo() {
				if (!uni.getStorageSync('map').city_code) {
					// #ifdef MP-WEIXIN
					this.map = await Map.wechat();
					// #endif
					// #ifdef H5
					this.map = await Map.H5();
					// #endif
					uni.setStorageSync('map', this.map);
				}{
					this.map = uni.getStorageSync('map');
				}

			},
			async prize() {
				let res = await Route.wheel_prize_info({
					uid: uni.getStorageSync('userInfo').uid
				});
				if (!res) {
					this.alertLottery = true;
				}
			},
			// 电影列表-热映
			async movieHotList() {
				this.move_list_hot = await Route.movie_list({
					type: 1,
					cityId: this.map.city_code
				});
				this.losding = false;
			},
			// 电影列表-预售
			async movieSoonList() {
				this.move_list_soon = await Route.movie_list({
					type: 0,
					cityId: this.map.city_code
				});
				this.losding = false;
			},
			//轮播图
			async bannerList() {
				this.banner_list = await Route.banner_list();
			},
			// 搜索
			inputSearch(e) {
				this.searchValue = e;
			},
			// 清空搜索
			clearSearch() {
				this.searchValue = '';
			},
			// 搜索电影
			searchBtn() {
				if (!this.searchValue) {
					return uni.showToast({
						icon: 'none',
						title: '请输入电影名称'
					});
				}
				uni.navigateTo({
					url: '../search/search?name=' + this.searchValue
				});
			},
			// 选择城市
			select_city() {
				uni.navigateTo({
					url: '../address_city/address_city'
				});
			},
			// 轮播
			change(e) {
				this.current = e.detail.current;
			},
			// 选项卡
			tab_change_index(e) {
				this.tab_index = e.currentTarget.dataset.index;
			},
			// 列表-触底
			async scrolltolower() {
				let res;
				this.loading = true;
				switch (parseInt(this.tab_index)) {
					case 1:
						this.move_list_hot_page += 1;
						res = await Route.movie_list({
							type: 1,
							cityId: this.map.city_code,
							page: this.move_list_hot_page
						});
						this.move_list_hot = this.move_list_hot.concat(res);
						break;
					case 0:
						this.move_list_soon_page += 1;
						res = await Route.movie_list({
							type: 0,
							cityId: this.map.city_code,
							page: this.move_list_soon_page
						});
						this.move_list_soon = this.move_list_soon.concat(res);
						break;
				}
				this.loading = false;
				if (res.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '没有更多啦'
					});
				}
			},
			// 购票
			buyBtn(e) {
				let data = {
					filmId: e.movieId || e.filmId,
					pic: e.poster || e.pic,
					name: e.movieName || e.name,
					grade: e.grade,
					filmTypes: e.movieType || e.filmTypes,
					cast: e.cast,
					publishDate: e.publishDate
				};


				uni.navigateTo({
					url: '../movie/movie?data=' + JSON.stringify(data)
				});
			},
			// 电影详情
			movieInfoBtn(e) {
				uni.navigateTo({
					url: '../movie_info/movie_info?filmId=' + e.filmId
				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.scroll {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	// 搜索
	.search {
		position: fixed;
		z-index: 9;
		background: #fff;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	
	&_city {
			display: flex;
			flex-direction: row;
			align-items: center;

			&_icon {
				width: 49rpx;
				height: 49rpx;
			}

			&_text {
				font-size: $uni-font-size-base;
				margin-left: 10rpx;
			}
		}
	
	&_input {
			width: 366rpx;
		}

		&_btn {
			background: $template-background;
			color: $uni-text-color-inverse;
			width: 100rpx;
			height: 49rpx;
			padding: 6rpx 16rpx;
			line-height: 49rpx;
			text-align: center;
			border-radius: 40rpx;
		}
	}

	// 轮播
	.banner {
		margin: 0 auto;
		margin-top: 133rpx;
		height: 300rpx;
		width: 100%;

		&_item {
			height: 300rpx;
			width: 100%;

			&_img {
				height: 300rpx;
				width: 690rpx;
				border-radius: $uni-border-radius-lg;
				display: block;
				margin: 0 auto;
			}
		}
	}

	// 选项卡
	.tab {
		display: flex;
		width: 100%;
		height: 88rpx;
		justify-content: space-around;
		align-items: center;

		&_item {
			font-size: $uni-font-size-lg;
			position: relative;
			color: $uni-text-color-grey;
		}

		&_active {
			color: $template-background;
		}

		&_active:after {
			//伪元素实现第二层
			content: ' ';
			position: absolute;
			left: 0;
			bottom: -9px;
			width: 100%;
			height: 6rpx;
			background: $template-background;
			border-radius: $uni-border-radius-lg;
		}
	}

	// 电影列表
	.list {
		display: flex;
		flex-direction: column;
		align-items: center;
	
	&_item {
			position: relative;
			width: 690rpx;
			padding: 33rpx 0;
			display: flex;
			flex-direction: row;
			border-top: 1rpx solid $template-line;

			&_img {
				width: 238rpx;
				height: 333rpx;
				border-radius: $uni-border-radius-lg;
			}

			&_info {
				display: flex;
				flex-direction: column;
				height: 333rpx;
				width: 333rpx;
				justify-content: space-between;
				margin-left: 33rpx;

				&_name {
					font-size: $uni-font-size-lg;
					font-weight: 600;
				}

				&_filmTypes {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}

				&_money {
					font-size: $uni-font-size-base;
					color: red;

					&_text {
						text-decoration: line-through;
						color: $uni-text-color-grey;
						margin-right: 8rpx;
					}
				}

				&_score {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}

				&_type {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}

				&_actor {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				&_date {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}
			}

			&_btn {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 100rpx;
				height: 66rpx;
				text-align: center;
				line-height: 66rpx;
				background: #f9ba37;
				font-size: $uni-font-size-sm;
				border-radius: $uni-border-radius-lg;
			}
		}
	}

	// 红包雨
	.lottery {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;

		&_gif {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 620rpx;
			height: 620rpx;
		}
	}
</style>
